import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ichinesereader/controller/oauth.dart';
import 'package:ichinesereader/models/oauth/linkRequest.dart';
import 'package:ichinesereader/themes/appTheme.dart';
import 'package:ichinesereader/themes/buttonStyles.dart';
import 'package:ichinesereader/utils/log.dart';
import 'package:reactive_forms/reactive_forms.dart';
// import 'package:ichinesereader/models/oauth/linkResut.dart';

class Link extends StatefulWidget {
  final String sessionType;

  Link({required this.sessionType});

  @override
  _LinkState createState() => _LinkState();
}

class _LinkState extends State<Link> {
  late FormGroup form;
  final OauthController controller = Get.find();
  AppButtonStyles _appButtonStyles = new AppButtonStyles();
  String message = '';
  bool value = false;
  String _userName = '';
  String _passWord = '';

  @override
  Widget build(BuildContext context) {
    // controller.obx((data) {});
    // LinkResult linkResult = controller.linkResult.value;
    // if (linkResult.token.length > 0) {
    //   Get.to('/xlogin');
    //   return Container();
    // }

    return Scaffold(
        body: Container(
            height: MediaQuery.of(context).size.height,
            decoration: Get.isDarkMode
                ? BoxDecoration(
                    gradient: LinearGradient(
                      colors: [
                        Color(0xff111111),
                        Color(0xff222222),
                        Color(0xff222222),
                        Color(0xff333333),
                        Color(0xff444444),
                      ],
                      begin: Alignment.topLeft,
                      end: Alignment(2.0, 1.0),
                    ),
                  )
                : BoxDecoration(
                    gradient: LinearGradient(
                      colors: [
                        Get.theme.primaryColorDark,
                        AppTheme.colors.primary,
                        AppTheme.colors.primary,
                        AppTheme.colors.babyBlue,
                        Get.theme.primaryColorLight,
                      ],
                      begin: Alignment.topLeft,
                      end: Alignment(2.0, 1.0),
                    ),
                  ),
            child: Center(
              child: Container(
                height: 530,
                width: 530,
                child: ReactiveForm(
                  formGroup: form,
                  child: Container(
                    decoration: BoxDecoration(
                      color: Get.isDarkMode
                          ? Colors.blueGrey.withOpacity(0.1)
                          : Colors.white.withOpacity(0.2),
                      boxShadow: [
                        BoxShadow(
                          blurRadius: 2,
                          spreadRadius: 1,
                          color: Get.isDarkMode
                              ? Colors.blueGrey.withOpacity(0.1)
                              : Colors.white.withOpacity(0.1),
                          offset: Offset(-27, -27),
                        ),
                        BoxShadow(
                          blurRadius: 2,
                          spreadRadius: 1,
                          color: Get.isDarkMode
                              ? Colors.blueGrey.withOpacity(0.1)
                              : Colors.white.withOpacity(0.1),
                          offset: Offset(27, 27),
                        ),
                      ],
                    ),
                    padding: EdgeInsets.symmetric(
                      vertical: 70,
                    ),
                    child: Center(
                      child: Stack(
                        children: [
                          Container(
                            width: 350,
                            height: 50,
                            decoration: BoxDecoration(
                              color: Get.isDarkMode
                                  ? Colors.black.withOpacity(0.2)
                                  : Colors.white.withOpacity(0.7),
                            ),
                            child: ReactiveTextField(
                              formControlName: 'username',
                              maxLines: 1,
                              autocorrect: false,
                              decoration: InputDecoration(
                                prefixIcon: Icon(
                                  Icons.perm_identity_rounded,
                                  color: Get.isDarkMode
                                      ? Get.theme.primaryColorDark
                                          .withOpacity(0.8)
                                      : Get.theme.primaryColorDark,
                                ),
                                hintText: 'Username'.tr,
                                hintStyle: TextStyle(
                                  fontFamily: 'Montserrat',
                                  color: Get.isDarkMode
                                      ? Get.theme.primaryColorDark
                                          .withOpacity(0.8)
                                      : Get.theme.primaryColorDark,
                                ),
                              ),
                              validationMessages: {
                                ValidationMessage.required: (_) =>
                                    'Username must not be empty!'.tr,
                              },
                            ),
                          ),
                          Container(
                            width: 350,
                            height: 50,
                            margin: EdgeInsets.symmetric(
                              vertical: 64,
                            ),
                            decoration: BoxDecoration(
                              color: Get.isDarkMode
                                  ? Colors.black.withOpacity(0.2)
                                  : Colors.white.withOpacity(0.7),
                            ),
                            child: ReactiveTextField(
                              formControlName: 'password',
                              maxLines: 1,
                              autocorrect: false,
                              obscureText: true,
                              style: TextStyle(
                                fontFamily: 'Montserrat',
                              ),
                              decoration: InputDecoration(
                                prefixIcon: Icon(
                                  Icons.password_rounded,
                                  color: Get.isDarkMode
                                      ? Get.theme.primaryColorDark
                                          .withOpacity(0.8)
                                      : Get.theme.primaryColorDark,
                                ),
                                hintText: 'Password'.tr,
                                hintStyle: TextStyle(
                                  fontFamily: 'Montserrat',
                                  color: Get.isDarkMode
                                      ? Get.theme.primaryColorDark
                                          .withOpacity(0.8)
                                      : Get.theme.primaryColorDark,
                                ),
                              ),
                              validationMessages: {
                                ValidationMessage.minLength: (_) =>
                                    'Password min length 6 characters'.tr,
                              },
                            ),
                          ),
                          Container(
                            width: 350,
                            margin: EdgeInsets.only(
                              top: 177,
                            ),
                            child: ReactiveFormConsumer(
                              builder: (context, form, child) {
                                return Container(
                                  decoration: BoxDecoration(
                                    color: Colors.blueGrey.withOpacity(0.1),
                                    borderRadius: BorderRadius.circular(7),
                                  ),
                                  padding: EdgeInsets.all(9),
                                  child: ElevatedButton(
                                    style: _appButtonStyles.loginButtonStyle(),
                                    onPressed: () {
                                      if (form.valid) {
                                        _passWord =
                                            form.control('password').value;
                                        _userName =
                                            form.control('username').value;
                                        Log.debug(_userName);
                                        Log.debug(_passWord);
                                        LinkRequest request = new LinkRequest(
                                            userName: _userName,
                                            userId: '',
                                            password: _passWord,
                                            sessionType: widget.sessionType);
                                        controller.doLink(request);
                                      } else {
                                        form.markAllAsTouched();
                                      }
                                    },
                                    child:
                                        Text('Link iChineseReader Account'.tr,
                                            style: TextStyle(
                                              fontFamily: 'Montserrat',
                                            )),
                                  ),
                                );
                              },
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            )));
  }
}
